<template>
  <div class="top">
    <div class="topContent">
      <span class="pls-notice-tag">
        腾讯云公告
      </span>
      <span>【备案】关于存量APP备案通知</span>
    </div>
  </div>
  <div class="navbar" :style="backStyle" @mouseenter="changeBackCor(true)" @mouseleave="changeBackCor(false)">
    <div class="logo">
      <img src="https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/slice/logo.23996906.svg" alt="">
    </div>
    <div class="leftBar">
      <div class="barSon"
        v-for="(item,index) in listBar"
        :key='index'
        :style="[item.tag ? innercolorFont : '']"
        @mouseenter="myIn(item.inkey,index)"
        @mouseleave="myIn(item.leakey,index)">
        {{ item.name }}
        <span class="innerBottom" :style="[item.tag ? innerboderBottomSty : '']"></span>
      </div>
    </div>
    <div class="rightBar">
      <div class="rigBarSon">

      </div>
      <div class="rigBarSon">中国站</div>
      <div class="rigBarSon">文档</div>
      <div class="rigBarSon">备案</div>
      <div class="rigBarSon">控制台</div>
      <div class="rigBarSon">登录</div>
      <div class="rigBarSon">注册</div>
    </div>
  </div>
  <Mouse :isShow="showCom" @inner="inner" @leave="leave" :ObjConet="ObjConet" ref="child"></Mouse>
</template>
<script setup>
import Mouse from '@/components/mouseoverIn.vue'
import { ref, reactive, getCurrentInstance, watch } from 'vue'
// 获取位置信息
// const space = reactive({
//   x: null,
//   y: null
// })
// 子组件获取的数据
const ObjConet = reactive({})
// bar List
const listBar = reactive([
  {
    name: '最新活动',
    inkey: 1,
    leakey: 10,
    tag: false
  },
  {
    name: '产品',
    inkey: 2,
    leakey: 12,
    tag: false
  },
  {
    name: '解决方案',
    inkey: 3,
    leakey: 13,
    tag: false
  },
  {
    name: '定价',
    inkey: 4,
    leakey: 14,
    tag: false
  },
  {
    name: '企业中心',
    inkey: 5,
    leakey: 15,
    tag: false
  },
  {
    name: '云市场',
    inkey: 6,
    leakey: 16,
    tag: false
  },
  {
    name: '开发者',
    inkey: 7,
    leakey: 17,
    tag: false
  },
  {
    name: '更多',
    inkey: 8,
    leakey: 18,
    tag: false
  }
])
// 模拟接口
const res = reactive([
  {
    name: '最新活动',
    content: '开盘前半小时，登录云端（我们目前在用两个云，阿里云和腾讯云）看一看程序自动启动是否正常，同时看一看交易助手的设置。',
    arrList: [
      {
        name: '最新活动',
        sonList: [
          '云端云端', '云端,', '云端,'
        ]
      },
      {
        name: '产品',
        sonList: [
          '奥迪', '奥迪奥迪', '奥奥迪'
        ]
      },
      {
        name: '最新动',
        sonList: ['报名', '报名', '报名']
      },
      {
        name: '最新动',
        sonList: ['报名', '报名', '报名']
      },
      {
        name: '最新动',
        sonList: ['报名', '报名', '报名']
      }
    ],
    lastArr: [
      {
        name: '脾脾',
        content: '开盘前半小时，登录云端（我们目前在用两个云，阿里云和腾讯'
      },
      {
        name: '脾脾',
        content: '开盘前半小时，登录云端（我们目前在用两个云，阿里云和腾讯'
      },
      {
        name: '脾脾',
        content: '开盘前半小时，登录云端（我们目前在用两个云，阿里云和腾讯'
      }
    ],
    inkey: 1,
    leakey: 10,
    tag: false
  },
  {
    name: '产品',
    lastArr: [
      {
        name: '脾脾',
        content: '开盘前半小时，登录云端（我们目前在用两个云，阿里云和腾讯'
      },
      {
        name: '脾脾',
        content: '开盘前半小时，登录云端（我们目前在用两个云，阿里云和腾讯'
      },
      {
        name: '脾脾',
        content: '开盘前半小时，登录云端（我们目前在用两个云，阿里云和腾讯'
      }
    ],
    content: '上网学习一下新东西（比如人工智能），经常发现自己真的老了，于是偷个懒，泡个茶喝一喝，回忆一下年轻时的各种牛逼。',
    arrList: [
      {
        name: '产品',
        sonList: [
          '云端云端', '云端,', '云端,'
        ]
      },
      {
        name: '产品',
        sonList: [
          '奥迪', '奥迪奥迪', '奥奥迪'
        ]
      },
      {
        name: '产品',
        sonList: ['报名', '报名', '报名']
      },
      {
        name: '产品',
        sonList: ['报名', '报名', '报名']
      },
      {
        name: '产品',
        sonList: ['报名', '报名', '报名']
      }
    ],
    inkey: 2,
    leakey: 12,
    tag: false
  },
  {
    name: '解决方案',
    lastArr: [
      {
        name: '前半',
        content: '开盘前半小时，登录云端（我们目前在用两个云，阿里云和腾讯'
      },
      {
        name: '小时',
        content: '开盘前半小时，登录云端（我们目前在用两个云，阿里云和腾讯'
      },
      {
        name: '云端',
        content: '开盘前半小时，登录云端（我们目前在用两个云，阿里云和腾讯'
      }
    ],
    content: '看一看是不是有什么灵感会有新的策略想法，当然，大部分时间没有什么灵感。',
    inkey: 3,
    arrList: [
      {
        name: '解决方案',
        sonList: [
          '云端云端', '云端,', '云端,'
        ]
      },
      {
        name: '解决方案',
        sonList: [
          '奥迪', '奥迪奥迪', '奥奥迪'
        ]
      },
      {
        name: '解决方案',
        sonList: ['报名', '报名', '报名']
      },
      {
        name: '解决方案',
        sonList: ['报名', '报名', '报名']
      },
      {
        name: '解决方案',
        sonList: ['报名', '报名', '报名']
      }
    ],
    leakey: 13,
    tag: false
  },
  {
    name: '定价',
    content: '早上6点起来跑步，充满信心迎接新的一天，不过，当看到晨练的大叔大妈时，感觉自己和他们也没什么两样。',
    inkey: 4,
    leakey: 14,
    tag: false
  },
  {
    name: '企业中心',
    content: '、收盘后半小时，对帐户情况进行统计，形成报表。',
    inkey: 5,
    leakey: 15,
    tag: false
  },
  {
    name: '云市场',
    content: '新策略开发（与外地的合作伙伴进行沟通，提出新策略的思维导图，构建新的策略组，并进行测试）。',
    inkey: 6,
    leakey: 16,
    tag: false
  },
  {
    name: '开发者',
    content: '进行老策略维护（一段时间后，需要针对新的行情数据进行一下测试，以确定老策略的稳定性）。',
    inkey: 7,
    leakey: 17,
    tag: false
  },
  {
    name: '更多',
    content: '开盘后半小时，看一看程序是否正常运转，包括开平仓，需要动用一键同步来查看。',
    inkey: 8,
    leakey: 18,
    tag: false
  }
])
// 是否显示弹出层
const showCom = ref(false)
// 改变背景颜色
const backStyle = reactive({
  backgroundColor: '#EFF2F5'
})
const changeBackCor = (e) => {
  e ? backStyle.backgroundColor = '#ffffff' : backStyle.backgroundColor = '#EFF2F5'
}
/**
 * 组件内的移入移出
 * @param inner 移入
 * @param leave 移出
 */
// 导航栏 bar 移入移出
const innerboderBottomSty = reactive({
  color: '#0052d9',
  backgroundColor: '#0052d9'
})
const innercolorFont = reactive({
  color: '#0052d9'
})
const record = ref(null)
const myIn = (e, b) => {
  record.value = b
  if (e > 0 && e < 10) {
    listBar[record.value].tag = true
    showCom.value = true
    ObjConet.value = res[record.value]
  } else if (e > 9 && e < 20) {
    listBar[record.value].tag = false
    showCom.value = false
  }
}
// 组件内的移入移出
const inner = () => {
  listBar[record.value].tag = true
  showCom.value = true
  backStyle.backgroundColor = '#ffffff'
}
const leave = () => {
  listBar[record.value].tag = false
  showCom.value = false
}
// dom - ref
// const test = ref(null)
// const dom = getCurrentInstance()
// watch(showCom, (newValue) => {
//   if (newValue) {
//     console.log(dom.ctx.$refs.child)
//   }
// })
</script>
<style lang="scss" scoped>
.showedd {
  margin: 40px auto;
  width: 200px;
  height: 100px;
  background-color: yellowgreen;
  box-shadow: 0px 4px 9px #000 inset;
}
.top {
  width: 100%;
  height: 54px;
  background: #3d485d;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  .topContent {
    width: fit-content;
    .pls-notice-tag {
      position: relative;
      height: 22px;
      padding: 0 8px;
      background: #0052d9;
      font-size: 12px;
      color: #fff;
      text-align: center;
      line-height: 22px;
      border-radius: 2px;
      border-bottom-right-radius: 0;
      margin-right: 20px;
    }
    .pls-notice-tag:after {
      content: "";
      position: absolute;
      left: 100%;
      bottom: 0;
      border-style: solid;
      border-width: 3px 4px;
      border-color: transparent transparent #0052d9 #0052d9;
    }
  }
}
.navbar {
  width: auto;
  align-items: center;
  display: flex;
  padding-left: 20px;
  height: 62px;
  cursor:pointer;
  .logo {
    width: 8%;
  }
  .leftBar {
    display: flex;
    width: 50%;
    .barSon {
      width: 13%;
      height: 62px;
      text-align: center;
      line-height: 62px;
      position: relative;
      .innerBottom {
        display: block;
        position: absolute;
        bottom: 0;
        height: 2px;
        width: 100%;
      }
    }
  }
  .rightBar {
    margin-left: 5%;
    width: 38%;
    display: flex;
    .rigBarSon {
      width: fit-content;
      margin: 0 10px;
    }
  }
}
</style>
